<template>
	<view>
		<view class="bg-white padding-left-xs padding-right-xs solid-bottom">
			<view class="cu-item action">
				<view @tap="click" class="flex justify-between align-center padding-left padding-right padding-top-sm"
					style="width: 100%;">
					<view class="flex justify-start align-center">
						<view v-if="icon&&icon.type == 1" class="padding-right-xs">
							<text :class="'cu-tag radius sm line-'+icon.color">{{icon.name}}</text>
						</view>
						<view v-else-if="post.is_hot" class="padding-right-xs">
							<text class="cuIcon-hotfill text-red"></text>
						</view>
						<view v-else-if="post.has_video" class="padding-right-xs">
							<text class="cuIcon-video text-cyan"></text>
						</view>
						<text
							:class="'text-lg text-bold text-'+[post.is_read==1&&showReadStatus?'gray':'black']">{{post.title}}</text>
					</view>
					<view v-if="showAuditStatus" class="padding-bottom-xs">
						<view :class="'cu-tag sm radius line-'+auditStatus.color">{{auditStatus.name}}</view>
					</view>
				</view>
				<view @tap="click" class="flex justify-between align-center padding-left padding-right">
					<view class="flex justify-start align-start" style="flex-direction: column;">
						<view v-if="post.topic&&shouldShowTopic" class="padding-bottom-xs padding-top-xs">
							<view @tap.stop="clickTopic" class="flex justify-start align-center round"
								style="background-color: #eff6fb;padding: 6upx 10upx;">
								<view class="padding-right-xs">
									<image src="../static/images/setting/topic.png" style="width: 30upx;height: 30upx;">
									</image>
								</view>
								<text class="text-blue">{{post.topic.title}}</text>
							</view>
						</view>
						<text style="font-size: 30upx;"
							:class="['text-'+(post.is_read==1&&showReadStatus?'gray':'black')]+[post.image_list&&post.image_list.length>0?'':' padding-top-xs padding-bottom-xs']">
							{{post.summary}}
						</text>
					</view>
					<view v-if="showImage && post.image_list && post.image_list.length > 0" class="padding-left-sm">
						<view v-if="hasVideo" style="width: 100upx;height: 100upx;z-index: 1;">
							<image class="radius bg-mask" :src="post.image_list[0]+'?imageView2/1/w/120/h/120/q/75'"
								style="width: 100upx;height: 100upx;">
								<view class="text-xl" style="position: absolute;top: 92upx;right:72upx;z-index: 2;">
									<text class="cuIcon-video text-white"></text>
								</view>
							</image>
						</view>
						<view v-else>
							<image class="radius" :src="post.image_list[0]+'?imageView2/1/w/120/h/120/q/75'"
								style="width: 100upx;height: 100upx;">
							</image>
						</view>
					</view>
				</view>
				<view :class="'padding-left padding-right padding-bottom-sm flex justify-between align-center '+[post.topic?'padding-top-xs':'']">
					<view class="flex justify-between align-end" style="width: 100%;">
						<view class="flex justify-start align-center padding-right">
							<view @tap.stop="jumpToUserProfile" class="cu-avatar sm round" :style="'background-image: url('+post.author.avatar+');'">
							</view>
							<view class="flex justify-start align-start padding-left-xs"
								style="flex-direction: column;">
								<text @tap.stop="jumpToUserProfile" class="text-grey text-sm">{{post.author.nickname}}</text>
								<view class="flex justify-start align-center">
									<text class="text-sm text-gray">
										{{post.show_time}}
									</text>
									<text class="padding-left-sm text-sm" style="color: #888;" v-if="post.forum">发布在</text>
									<text @tap="clickForum" v-if="post.forum"
										class="text-grey text-sm padding-left-xs">{{post.forum.name}}</text>
								</view>
							</view>
						</view>
						<view class="flex justify-end align-center">
							<view @tap="click" class="action padding-left-xl flex align-center justify-start">
								<text class="cuIcon-attention text-gray"></text>
								<view style="width: 2px;"></view>
								<text class="text-gray text-sm">{{format(post.read_count)}}</text>
							</view>
							<view @tap="click" v-if="post.comment_count > 0"
								class="action padding-left-xl flex align-center justify-start">
								<text class="cuIcon-comment text-gray"></text>
								<view style="width: 2px;"></view>
								<text class="text-gray text-sm">{{format(post.comment_count)}}</text>
							</view>
							<view v-if="showEditBtn" @tap="showExpandMenuAction($event)"
								class="padding-xs action flex justify-between align-center">
								<text class="padding-left-xl text-grey cuIcon-more text-bold text-xl"></text>
							</view>
						</view>
					</view>
					<view v-if="showAvatarList" @tap="click" class="flex justify-end align-center">
						<view v-if="post.avatar_list && post.avatar_list.length > 0" class="cu-avatar-group flex">
							<view class="cu-avatar round sm" v-for="(avatar,index) in post.avatar_list" :key="index"
								:style="[{ backgroundImage:'url(' + avatar + ')' }]"></view>
						</view>
						<text class="padding-left-xs text-sm text-grey">{{post.join_user_count}}人参与</text>
						<text class="cuIcon-right"></text>
					</view>
				</view>
			</view>
		</view>
		<chunLei-popups v-model="popMore.showExpandMenu" :x="popMore.x" :y="popMore.y" dynamic>
			<view :class="'flex align-center justify-start '+[index!==expandMenuList.length-1?'padding-bottom-sm':'']"
				style="flex-direction: column;" v-for="(item,index) in expandMenuList" :key="index">
				<view @tap="tapPopup(index)" class="flex justify-start align-center">
					<text :class="'padding-right-xs cuIcon-'+item.icon"></text>
					<text class="text-df">{{item.title}}</text>
				</view>
			</view>
		</chunLei-popups>
	</view>
</template>

<script>
	import chunLeiPopups from "@/components/chunLei-popups/chunLei-popups.vue";
	import config from '@/api/config.js'
	import {
		formatCount
	} from '@/api/utils.js'
	export default {
		components: {
			chunLeiPopups
		},
		name: "PostItem",
		data() {
			return {
				popMore: {
					x: 30,
					y: 50,
					showExpandMenu: false,
				}
			};
		},
		mounted() {
			if (this.showEditBtn) {
				let that = this
				uni.$on('UserPostListDidScroll', function() {
					if (that.popMore.showExpandMenu) {
						that.popMore.showExpandMenu = false
					}
				})
			}
		},
		props: {
			post: {
				type: Object,
				default: {}
			},
			isLast: {
				type: Boolean,
				default: false
			},
			showAuditStatus: {
				type: Boolean,
				default: false
			},
			showEditBtn: {
				type: Boolean,
				default: false
			},
			showDeleteBtn: {
				type: Boolean,
				default: false
			},
			showImage: {
				type: Boolean,
				default: true
			},
			showForum: {
				type: Boolean,
				default: false
			},
			shouldShowTopic: {
				type: Boolean,
				default: true
			},
			showAvatarList: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			showReadStatus() {
				return config.showReadStatus == 1 ? true : false
			},
			expandMenuList() {
				let items = [{
						title: '编辑',
						icon: 'edit'
					},
					{
						title: '删除',
						icon: 'delete'
					}
				]
				if (this.post.only_self_visible == 0) {
					items.push({
						title: '隐藏',
						icon: 'attentionforbid'
					})
				} else {
					items.push({
						title: '公开',
						icon: 'attention'
					})
				}
				return items
			},
			hasVideo() {
				return this.post.link && this.post.link.length > 0 && this.post.link.indexOf('.mp4') !== -1
			},
			auditStatus() {
				if (this.post.only_self_visible == 1) {
					return {
						'color': 'mauve',
						'name': '已隐藏'
					}
				}
				let map = {
					'-1': {
						'color': 'red',
						'name': '未通过'
					},
					'0': {
						'color': 'cyan',
						'name': '审核中'
					},
					'1': {
						'color': 'green',
						'name': '已发布'
					}
				}
				return map[this.post.audit_status]
			},
			icon() {
				if (this.post.sort_index > 0) {
					return {
						type: 1,
						color: 'blue',
						name: '置顶'
					}
				}
				if (this.post.is_hot) {
					return {
						type: 2,
						color: 'red',
						image: 'hotfill',
						name: '热帖'
					}
				}
				if (this.post.is_recommend) {
					return {
						type: 1,
						color: 'orange',
						name: '推荐'
					}
				}
				if (this.post.link && this.post.link.length > 0 && this.post.link.indexOf('.mp4') !== -1) {
					return {
						type: 2,
						image: 'video',
						color: 'cyan',
						name: '视频'
					}
				}
				if (this.post.image_list && this.post.image_list.length > 0) {
					return {
						type: 2,
						image: 'pic',
						color: 'mauve',
						name: '有图'
					}
				}
				return null
			}
		},
		methods: {
			jumpToUserProfile() {
				uni.navigateTo({
					url: '/pages/profile/profile?userId=' + this.post.owner_id
				})
			},
			format(count) {
				return formatCount(count)
			},
			tapPopup(index) {
				if (index == 0) {
					this.$emit('edit')
				} else if (index == 1) {
					this.$emit('delete')
				} else if (index == 2) {
					this.$emit('visibleChange')
				}
			},
			showExpandMenuAction(e) {
				this.popMore.x = e.touches[0].clientX
				this.popMore.y = e.touches[0].clientY
				this.popMore.showExpandMenu = !this.popMore.showExpandMenu
			},
			clickTopic() {
				this.$emit('clickTopic')
			},
			clickForum() {
				this.$emit('clickForum')
			},
			click() {
				this.$emit('click')
			},
			editPostAction() {
				this.$emit('edit')
			},
			deletePostAction() {
				this.$emit('delete')
			}
		},
	}
</script>

<style lang="scss" scoped>
</style>
